
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-setting"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-setting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-large-window"></i>
                    <div class="name">窗口放大</div>
                    <div class="fontclass">.icon-large-window</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-refresh"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-refresh</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-checkbox-disable"></i>
                    <div class="name">多选</div>
                    <div class="fontclass">.icon-checkbox-disable</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-f5"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-f5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-up"></i>
                    <div class="name">向上箭头</div>
                    <div class="fontclass">.icon-arrow-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close1"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-close1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit1"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit2"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-reduce"></i>
                    <div class="name">减少</div>
                    <div class="fontclass">.icon-reduce</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stranger"></i>
                    <div class="name">陌生人</div>
                    <div class="fontclass">.icon-stranger</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-collection"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-collection</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-down2"></i>
                    <div class="name">向下箭头</div>
                    <div class="fontclass">.icon-arrow-down2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-up2"></i>
                    <div class="name">向上箭头</div>
                    <div class="fontclass">.icon-arrow-up2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-add"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-add</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-focusing"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-focusing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-broadcast"></i>
                    <div class="name">广播</div>
                    <div class="fontclass">.icon-broadcast</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-radio-sel"></i>
                    <div class="name">单选</div>
                    <div class="fontclass">.icon-radio-sel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-query"></i>
                    <div class="name">问号</div>
                    <div class="fontclass">.icon-query</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaofangshuanfenxi"></i>
                    <div class="name">消防栓分析</div>
                    <div class="fontclass">.icon-xiaofangshuanfenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou-copy"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-download"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.icon-download</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-copy"></i>
                    <div class="name">复制</div>
                    <div class="fontclass">.icon-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-down"></i>
                    <div class="name">向下箭头</div>
                    <div class="fontclass">.icon-arrow-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-relay"></i>
                    <div class="name">继电器</div>
                    <div class="fontclass">.icon-relay</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-playback"></i>
                    <div class="name">回放</div>
                    <div class="fontclass">.icon-playback</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-radio-disable"></i>
                    <div class="name">单选</div>
                    <div class="fontclass">.icon-radio-disable</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuaxin1"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-shuaxin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Location"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-Location</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-loading"></i>
                    <div class="name">loading</div>
                    <div class="fontclass">.icon-loading</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wiper"></i>
                    <div class="name">雨刮</div>
                    <div class="fontclass">.icon-wiper</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-more"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-more</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rizhi"></i>
                    <div class="name">日志</div>
                    <div class="fontclass">.icon-rizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-details"></i>
                    <div class="name">查看详情</div>
                    <div class="fontclass">.icon-details</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-suoding"></i>
                    <div class="name">锁定</div>
                    <div class="fontclass">.icon-suoding</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baojing"></i>
                    <div class="name">报警</div>
                    <div class="fontclass">.icon-baojing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jurisdiction"></i>
                    <div class="name">权限管理</div>
                    <div class="fontclass">.icon-jurisdiction</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-people-add"></i>
                    <div class="name">新增员工00</div>
                    <div class="fontclass">.icon-people-add</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheliang"></i>
                    <div class="name">车辆</div>
                    <div class="fontclass">.icon-cheliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-export"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.icon-export</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-network-man"></i>
                    <div class="name">网络管理</div>
                    <div class="fontclass">.icon-network-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-organise"></i>
                    <div class="name">机构</div>
                    <div class="fontclass">.icon-organise</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tv-wall"></i>
                    <div class="name">设备_电视墙</div>
                    <div class="fontclass">.icon-tv-wall</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-vip"></i>
                    <div class="name">VIP用户感知监控</div>
                    <div class="fontclass">.icon-vip</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lighting"></i>
                    <div class="name">灯光</div>
                    <div class="fontclass">.icon-lighting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ruler"></i>
                    <div class="name">尺寸</div>
                    <div class="fontclass">.icon-ruler</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user-man"></i>
                    <div class="name">用户管理</div>
                    <div class="fontclass">.icon-user-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-radio"></i>
                    <div class="name">单选</div>
                    <div class="fontclass">.icon-radio</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-save"></i>
                    <div class="name">保存</div>
                    <div class="fontclass">.icon-save</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-move-up1"></i>
                    <div class="name">上移</div>
                    <div class="fontclass">.icon-move-up1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-survey"></i>
                    <div class="name">概况</div>
                    <div class="fontclass">.icon-survey</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-default"></i>
                    <div class="name">恢复默认</div>
                    <div class="fontclass">.icon-default</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duoxuan"></i>
                    <div class="name">B-多选-未选中</div>
                    <div class="fontclass">.icon-duoxuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-loading2"></i>
                    <div class="name">loading</div>
                    <div class="fontclass">.icon-loading2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-checkbox-un"></i>
                    <div class="name">多选（未全选）</div>
                    <div class="fontclass">.icon-checkbox-un</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuejiguanli"></i>
                    <div class="name">学籍管理</div>
                    <div class="fontclass">.icon-xuejiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo-sousuo"></i>
                    <div class="name">搜索-搜索</div>
                    <div class="fontclass">.icon-sousuo-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-checkbox-selected"></i>
                    <div class="name">多选</div>
                    <div class="fontclass">.icon-checkbox-selected</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diannao"></i>
                    <div class="name">电脑</div>
                    <div class="fontclass">.icon-diannao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-security"></i>
                    <div class="name">消防安防</div>
                    <div class="fontclass">.icon-security</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-exit-full-screen"></i>
                    <div class="name">退出全屏</div>
                    <div class="fontclass">.icon-exit-full-screen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-local-config"></i>
                    <div class="name">本地配置</div>
                    <div class="fontclass">.icon-local-config</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cunchu"></i>
                    <div class="name">存储</div>
                    <div class="fontclass">.icon-cunchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-discontinue"></i>
                    <div class="name">停用</div>
                    <div class="fontclass">.icon-discontinue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-recovery"></i>
                    <div class="name">恢复</div>
                    <div class="fontclass">.icon-recovery</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-share"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-share</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alarm-man"></i>
                    <div class="name">报警管理</div>
                    <div class="fontclass">.icon-alarm-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-channel-man"></i>
                    <div class="name">通道管理</div>
                    <div class="fontclass">.icon-channel-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diaoyong"></i>
                    <div class="name">配置</div>
                    <div class="fontclass">.icon-diaoyong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youshang"></i>
                    <div class="name">右上</div>
                    <div class="fontclass">.icon-youshang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youxia"></i>
                    <div class="name">右下</div>
                    <div class="fontclass">.icon-youxia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuoshang"></i>
                    <div class="name">左上</div>
                    <div class="fontclass">.icon-zuoshang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuoxia"></i>
                    <div class="name">左下</div>
                    <div class="fontclass">.icon-zuoxia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xia"></i>
                    <div class="name">下</div>
                    <div class="fontclass">.icon-xia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-you"></i>
                    <div class="name">右</div>
                    <div class="fontclass">.icon-you</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shang"></i>
                    <div class="name">上</div>
                    <div class="fontclass">.icon-shang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuo"></i>
                    <div class="name">左</div>
                    <div class="fontclass">.icon-zuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-success"></i>
                    <div class="name">成功</div>
                    <div class="fontclass">.icon-success</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fail"></i>
                    <div class="name">失败</div>
                    <div class="fontclass">.icon-fail</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-warning"></i>
                    <div class="name">警告</div>
                    <div class="fontclass">.icon-warning</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-error"></i>
                    <div class="name">错误</div>
                    <div class="fontclass">.icon-error</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yes"></i>
                    <div class="name">对</div>
                    <div class="fontclass">.icon-yes</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-admin"></i>
                    <div class="name">admin</div>
                    <div class="fontclass">.icon-admin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-help"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.icon-help</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Cancellation"></i>
                    <div class="name">注销</div>
                    <div class="fontclass">.icon-Cancellation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-large"></i>
                    <div class="name">放大</div>
                    <div class="fontclass">.icon-large</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-password"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-password</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-confirm-password"></i>
                    <div class="name">确认密码</div>
                    <div class="fontclass">.icon-confirm-password</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-calendar"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-calendar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-delete"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-delete</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-restart"></i>
                    <div class="name">重启</div>
                    <div class="fontclass">.icon-restart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-small"></i>
                    <div class="name">缩小</div>
                    <div class="fontclass">.icon-small</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sign-out"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.icon-sign-out</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-speed"></i>
                    <div class="name">速度</div>
                    <div class="fontclass">.icon-speed</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stop-all"></i>
                    <div class="name">全部停止</div>
                    <div class="fontclass">.icon-stop-all</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shrink"></i>
                    <div class="name">展开</div>
                    <div class="fontclass">.icon-shrink</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-extend"></i>
                    <div class="name">展开</div>
                    <div class="fontclass">.icon-extend</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next-page"></i>
                    <div class="name">下一页</div>
                    <div class="fontclass">.icon-next-page</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-previous-page"></i>
                    <div class="name">上一页</div>
                    <div class="fontclass">.icon-previous-page</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-1-1"></i>
                    <div class="name">1比1</div>
                    <div class="fontclass">.icon-1-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-4-3"></i>
                    <div class="name">4比3</div>
                    <div class="fontclass">.icon-4-3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-16-9"></i>
                    <div class="name">16比9</div>
                    <div class="fontclass">.icon-16-9</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sound"></i>
                    <div class="name">伴音</div>
                    <div class="fontclass">.icon-sound</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-play"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-play</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-intercom"></i>
                    <div class="name">对讲</div>
                    <div class="fontclass">.icon-intercom</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sound-close"></i>
                    <div class="name">关闭伴音</div>
                    <div class="fontclass">.icon-sound-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-intercom-clo"></i>
                    <div class="name">关闭对讲</div>
                    <div class="fontclass">.icon-intercom-clo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-videotape"></i>
                    <div class="name">录像</div>
                    <div class="fontclass">.icon-videotape</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-full-screen"></i>
                    <div class="name">全屏</div>
                    <div class="fontclass">.icon-full-screen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stop"></i>
                    <div class="name">停止</div>
                    <div class="fontclass">.icon-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-preview-stop"></i>
                    <div class="name">停止预览</div>
                    <div class="fontclass">.icon-preview-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-display-scale"></i>
                    <div class="name">显示模式</div>
                    <div class="fontclass">.icon-display-scale</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-volume"></i>
                    <div class="name">音量</div>
                    <div class="fontclass">.icon-volume</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-preview"></i>
                    <div class="name">预览</div>
                    <div class="fontclass">.icon-preview</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-screenshot"></i>
                    <div class="name">抓图</div>
                    <div class="fontclass">.icon-screenshot</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-niaokan"></i>
                    <div class="name">鸟瞰</div>
                    <div class="fontclass">.icon-niaokan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-self-adaption"></i>
                    <div class="name">自适应</div>
                    <div class="fontclass">.icon-self-adaption</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-videotape-stop"></i>
                    <div class="name">停止录像</div>
                    <div class="fontclass">.icon-videotape-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stream-set"></i>
                    <div class="name">码流切换</div>
                    <div class="fontclass">.icon-stream-set</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stop-it"></i>
                    <div class="name">停</div>
                    <div class="fontclass">.icon-stop-it</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-1"></i>
                    <div class="name">1倍速度</div>
                    <div class="fontclass">.icon-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-8"></i>
                    <div class="name">8倍速度</div>
                    <div class="fontclass">.icon-8</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-4"></i>
                    <div class="name">4倍速度</div>
                    <div class="fontclass">.icon-4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-2"></i>
                    <div class="name">2倍速度</div>
                    <div class="fontclass">.icon-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-16"></i>
                    <div class="name">16倍速度</div>
                    <div class="fontclass">.icon-16</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-1-2"></i>
                    <div class="name">二分之一倍速度</div>
                    <div class="fontclass">.icon-1-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-1-8"></i>
                    <div class="name">八分之一倍速度</div>
                    <div class="fontclass">.icon-1-8</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-1-4"></i>
                    <div class="name">四分之一倍速度</div>
                    <div class="fontclass">.icon-1-4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-1-16"></i>
                    <div class="name">十六分之一倍速度</div>
                    <div class="fontclass">.icon-1-16</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stream4"></i>
                    <div class="name">第四码流</div>
                    <div class="fontclass">.icon-stream4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stream1"></i>
                    <div class="name">第一码流</div>
                    <div class="fontclass">.icon-stream1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stream2"></i>
                    <div class="name">第二码流</div>
                    <div class="fontclass">.icon-stream2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stream3"></i>
                    <div class="name">第三码流</div>
                    <div class="fontclass">.icon-stream3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-whitelist"></i>
                    <div class="name">白名单</div>
                    <div class="fontclass">.icon-whitelist</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuaxin"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-shuaxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-blacklist"></i>
                    <div class="name">黑名单</div>
                    <div class="fontclass">.icon-blacklist</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nk-close"></i>
                    <div class="name">停止鸟瞰</div>
                    <div class="fontclass">.icon-nk-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danzhen"></i>
                    <div class="name">单帧</div>
                    <div class="fontclass">.icon-danzhen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pause"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-pause</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-move-down"></i>
                    <div class="name">move-down</div>
                    <div class="fontclass">.icon-move-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-move-up"></i>
                    <div class="name">move-up</div>
                    <div class="fontclass">.icon-move-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-image"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-image</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-info"></i>
                    <div class="name">提示</div>
                    <div class="fontclass">.icon-info</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-upper-level"></i>
                    <div class="name">返回上一级</div>
                    <div class="fontclass">.icon-upper-level</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort"></i>
                    <div class="name">排序默认</div>
                    <div class="fontclass">.icon-sort</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-security1"></i>
                    <div class="name">警员</div>
                    <div class="fontclass">.icon-security1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-inspection"></i>
                    <div class="name">巡检</div>
                    <div class="fontclass">.icon-inspection</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-swap"></i>
                    <div class="name">切换</div>
                    <div class="fontclass">.icon-swap</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongneng"></i>
                    <div class="name">功能</div>
                    <div class="fontclass">.icon-gongneng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-equipment"></i>
                    <div class="name">设备</div>
                    <div class="fontclass">.icon-equipment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-recplayback"></i>
                    <div class="name">录像-回放</div>
                    <div class="fontclass">.icon-recplayback</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-multi-screen"></i>
                    <div class="name">多画面</div>
                    <div class="fontclass">.icon-multi-screen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Izhen"></i>
                    <div class="name">I帧</div>
                    <div class="fontclass">.icon-Izhen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-channelright"></i>
                    <div class="name">右声道</div>
                    <div class="fontclass">.icon-channelright</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-channelleft"></i>
                    <div class="name">左声道</div>
                    <div class="fontclass">.icon-channelleft</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-channelsel"></i>
                    <div class="name">声道选择</div>
                    <div class="fontclass">.icon-channelsel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-comparison"></i>
                    <div class="name">对比</div>
                    <div class="fontclass">.icon-comparison</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-grid"></i>
                    <div class="name">网格</div>
                    <div class="fontclass">.icon-grid</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danger"></i>
                    <div class="name">错误</div>
                    <div class="fontclass">.icon-danger</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-people-sum"></i>
                    <div class="name">总用户</div>
                    <div class="fontclass">.icon-people-sum</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-comparison2"></i>
                    <div class="name">对比分析</div>
                    <div class="fontclass">.icon-comparison2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bimicons-"></i>
                    <div class="name">战时出入口</div>
                    <div class="fontclass">.icon-bimicons-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-patrol"></i>
                    <div class="name">patrol</div>
                    <div class="fontclass">.icon-patrol</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuntai"></i>
                    <div class="name">yuntai</div>
                    <div class="fontclass">.icon-yuntai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-preview-all"></i>
                    <div class="name">一键打开</div>
                    <div class="fontclass">.icon-preview-all</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuangong"></i>
                    <div class="name">员工</div>
                    <div class="fontclass">.icon-yuangong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-frame-retreat"></i>
                    <div class="name">单帧退</div>
                    <div class="fontclass">.icon-frame-retreat</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-frame-forward"></i>
                    <div class="name">单帧进</div>
                    <div class="fontclass">.icon-frame-forward</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fast-forward"></i>
                    <div class="name">快进</div>
                    <div class="fontclass">.icon-fast-forward</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fast-back"></i>
                    <div class="name">快退</div>
                    <div class="fontclass">.icon-fast-back</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ren"></i>
                    <div class="name">人</div>
                    <div class="fontclass">.icon-ren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-narrow"></i>
                    <div class="name">缩小</div>
                    <div class="fontclass">.icon-narrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-enlarge"></i>
                    <div class="name">放大</div>
                    <div class="fontclass">.icon-enlarge</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sign"></i>
                    <div class="name">标记</div>
                    <div class="fontclass">.icon-sign</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nextlower"></i>
                    <div class="name">下一级</div>
                    <div class="fontclass">.icon-nextlower</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-import"></i>
                    <div class="name">导入</div>
                    <div class="fontclass">.icon-import</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-preview-stopall"></i>
                    <div class="name">停止全部预览</div>
                    <div class="fontclass">.icon-preview-stopall</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-deal-alarm"></i>
                    <div class="name">警待处理</div>
                    <div class="fontclass">.icon-deal-alarm</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-history-query"></i>
                    <div class="name">历史查询</div>
                    <div class="fontclass">.icon-history-query</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-gun"></i>
                    <div class="name">摄像机-枪机</div>
                    <div class="fontclass">.icon-video-gun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alarm-input"></i>
                    <div class="name">资源-报警输入</div>
                    <div class="fontclass">.icon-alarm-input</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alarm-output"></i>
                    <div class="name">资源-报警输出</div>
                    <div class="fontclass">.icon-alarm-output</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-d"></i>
                    <div class="name">3d</div>
                    <div class="fontclass">.icon-d</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-ball-half"></i>
                    <div class="name">摄像机-半球</div>
                    <div class="fontclass">.icon-video-ball-half</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-ball"></i>
                    <div class="name">摄像机-球机</div>
                    <div class="fontclass">.icon-video-ball</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-visitor"></i>
                    <div class="name">访客</div>
                    <div class="fontclass">.icon-visitor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-comparison1"></i>
                    <div class="name">对比</div>
                    <div class="fontclass">.icon-comparison1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dispatched"></i>
                    <div class="name">布控</div>
                    <div class="fontclass">.icon-dispatched</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-condition-monitoring"></i>
                    <div class="name">监控</div>
                    <div class="fontclass">.icon-condition-monitoring</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renyuanxiaoshuaitongji"></i>
                    <div class="name">人员效率统计</div>
                    <div class="fontclass">.icon-renyuanxiaoshuaitongji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roadway"></i>
                    <div class="name">车道偏离</div>
                    <div class="fontclass">.icon-roadway</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-view-quick"></i>
                    <div class="name">快速回放</div>
                    <div class="fontclass">.icon-view-quick</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mute"></i>
                    <div class="name">静音</div>
                    <div class="fontclass">.icon-mute</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoshi"></i>
                    <div class="name">教师</div>
                    <div class="fontclass">.icon-jiaoshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shujutongji"></i>
                    <div class="name">数据统计</div>
                    <div class="fontclass">.icon-shujutongji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-intersection"></i>
                    <div class="name">路口</div>
                    <div class="fontclass">.icon-intersection</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-focus"></i>
                    <div class="name">重点关注</div>
                    <div class="fontclass">.icon-focus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-advanced-function"></i>
                    <div class="name">高级功能</div>
                    <div class="fontclass">.icon-advanced-function</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anjianzhinengyanpanxitong"></i>
                    <div class="name">案件智能研判系统</div>
                    <div class="fontclass">.icon-anjianzhinengyanpanxitong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijianshezhi"></i>
                    <div class="name">时间设置</div>
                    <div class="fontclass">.icon-shijianshezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-product-info"></i>
                    <div class="name">产品信息</div>
                    <div class="fontclass">.icon-product-info</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-network-manage"></i>
                    <div class="name">网络管理</div>
                    <div class="fontclass">.icon-network-manage</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-serialport-set"></i>
                    <div class="name">串口设置</div>
                    <div class="fontclass">.icon-serialport-set</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-basic-set"></i>
                    <div class="name">基本设置</div>
                    <div class="fontclass">.icon-basic-set</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-regulator"></i>
                    <div class="name">调节器调节</div>
                    <div class="fontclass">.icon-regulator</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-superinfo-set"></i>
                    <div class="name">叠加信息设置</div>
                    <div class="fontclass">.icon-superinfo-set</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user-info"></i>
                    <div class="name">用户信息</div>
                    <div class="fontclass">.icon-user-info</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-timing"></i>
                    <div class="name">时间校对</div>
                    <div class="fontclass">.icon-timing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-test"></i>
                    <div class="name">测试</div>
                    <div class="fontclass">.icon-test</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-laser-zoom"></i>
                    <div class="name">激光变倍</div>
                    <div class="fontclass">.icon-laser-zoom</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chushihua"></i>
                    <div class="name">初始化</div>
                    <div class="fontclass">.icon-chushihua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yikatong"></i>
                    <div class="name">一卡通 (1)</div>
                    <div class="fontclass">.icon-yikatong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-implement"></i>
                    <div class="name">执行</div>
                    <div class="fontclass">.icon-implement</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-pan"></i>
                    <div class="name">全景</div>
                    <div class="fontclass">.icon-video-pan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-gun2"></i>
                    <div class="name">枪机</div>
                    <div class="fontclass">.icon-video-gun2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-gun1"></i>
                    <div class="name">摄像机-红外枪机</div>
                    <div class="fontclass">.icon-video-gun1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-trend"></i>
                    <div class="name">报警趋势</div>
                    <div class="fontclass">.icon-trend</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alarm-config"></i>
                    <div class="name">报警配置</div>
                    <div class="fontclass">.icon-alarm-config</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alarm-admin"></i>
                    <div class="name">报警管理</div>
                    <div class="fontclass">.icon-alarm-admin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fire-admin"></i>
                    <div class="name">消防管理</div>
                    <div class="fontclass">.icon-fire-admin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tvwall"></i>
                    <div class="name">电视墙</div>
                    <div class="fontclass">.icon-tvwall</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-electronic-map"></i>
                    <div class="name">电子地图</div>
                    <div class="fontclass">.icon-electronic-map</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-assets-admin"></i>
                    <div class="name">资产管理</div>
                    <div class="fontclass">.icon-assets-admin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-statistical-analysis"></i>
                    <div class="name">统计分析</div>
                    <div class="fontclass">.icon-statistical-analysis</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-soft"></i>
                    <div class="name">柔和</div>
                    <div class="fontclass">.icon-soft</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-standard"></i>
                    <div class="name">标准</div>
                    <div class="fontclass">.icon-standard</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bright"></i>
                    <div class="name">亮丽</div>
                    <div class="fontclass">.icon-bright</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-number-display"></i>
                    <div class="name">显示编号</div>
                    <div class="fontclass">.icon-number-display</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-number-hide"></i>
                    <div class="name">隐藏编号</div>
                    <div class="fontclass">.icon-number-hide</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-decode-stop"></i>
                    <div class="name">停止解码</div>
                    <div class="fontclass">.icon-decode-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-decode"></i>
                    <div class="name">解码</div>
                    <div class="fontclass">.icon-decode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-decode-stopall"></i>
                    <div class="name">停止全部解码</div>
                    <div class="fontclass">.icon-decode-stopall</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-decoding-state"></i>
                    <div class="name">解码状态</div>
                    <div class="fontclass">.icon-decoding-state</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-access-admin"></i>
                    <div class="name">门禁管理</div>
                    <div class="fontclass">.icon-access-admin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-access-analysis"></i>
                    <div class="name">门禁分析</div>
                    <div class="fontclass">.icon-access-analysis</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-move-left"></i>
                    <div class="name">左移</div>
                    <div class="fontclass">.icon-move-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-move-right"></i>
                    <div class="name">右移</div>
                    <div class="fontclass">.icon-move-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-polling"></i>
                    <div class="name">轮巡</div>
                    <div class="fontclass">.icon-polling</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-polling-stop"></i>
                    <div class="name">停止轮巡</div>
                    <div class="fontclass">.icon-polling-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-equipment-info"></i>
                    <div class="name">设备信息</div>
                    <div class="fontclass">.icon-equipment-info</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-equipment-set"></i>
                    <div class="name">设备管理</div>
                    <div class="fontclass">.icon-equipment-set</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-decode-state"></i>
                    <div class="name">解码状态</div>
                    <div class="fontclass">.icon-decode-state</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-pan-top"></i>
                    <div class="name">全景顶装</div>
                    <div class="fontclass">.icon-video-pan-top</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-pan-wall"></i>
                    <div class="name">全景壁装</div>
                    <div class="fontclass">.icon-video-pan-wall</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-pan-land"></i>
                    <div class="name">全景地装</div>
                    <div class="fontclass">.icon-video-pan-land</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-panorama"></i>
                    <div class="name">全景显示</div>
                    <div class="fontclass">.icon-panorama</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-180-180"></i>
                    <div class="name">180+180</div>
                    <div class="fontclass">.icon-180-180</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pan-ptz-180"></i>
                    <div class="name">全景+ptz+180</div>
                    <div class="fontclass">.icon-pan-ptz-180</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-4ptz"></i>
                    <div class="name">4ptz</div>
                    <div class="fontclass">.icon-4ptz</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-360"></i>
                    <div class="name">360</div>
                    <div class="fontclass">.icon-360</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pan-3ptz"></i>
                    <div class="name">全景+3ptz</div>
                    <div class="fontclass">.icon-pan-3ptz</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stream5"></i>
                    <div class="name">第五码流</div>
                    <div class="fontclass">.icon-stream5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-focus-stop"></i>
                    <div class="name">取消重点关注</div>
                    <div class="fontclass">.icon-focus-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-soldier"></i>
                    <div class="name">单兵执法</div>
                    <div class="fontclass">.icon-soldier</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-online-course"></i>
                    <div class="name">在线巡课</div>
                    <div class="fontclass">.icon-online-course</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alarm-process"></i>
                    <div class="name">报警处理</div>
                    <div class="fontclass">.icon-alarm-process</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-traffic"></i>
                    <div class="name">交通</div>
                    <div class="fontclass">.icon-traffic</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-operation"></i>
                    <div class="name">运维</div>
                    <div class="fontclass">.icon-operation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-teachers-students"></i>
                    <div class="name">师生</div>
                    <div class="fontclass">.icon-teachers-students</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-videotape-man"></i>
                    <div class="name">录像管理</div>
                    <div class="fontclass">.icon-videotape-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-traffic-man"></i>
                    <div class="name">交通管理</div>
                    <div class="fontclass">.icon-traffic-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-online-course-man"></i>
                    <div class="name">在线巡课管理</div>
                    <div class="fontclass">.icon-online-course-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-system-par-man"></i>
                    <div class="name">系统参数设置</div>
                    <div class="fontclass">.icon-system-par-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-visitor-man"></i>
                    <div class="name">访客管理</div>
                    <div class="fontclass">.icon-visitor-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-auto-control"></i>
                    <div class="name">自动操作</div>
                    <div class="fontclass">.icon-auto-control</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-manual-control"></i>
                    <div class="name">手动操作</div>
                    <div class="fontclass">.icon-manual-control</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-execute"></i>
                    <div class="name">开始执行</div>
                    <div class="fontclass">.icon-execute</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-execute-stop"></i>
                    <div class="name">停止执行</div>
                    <div class="fontclass">.icon-execute-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-display-number"></i>
                    <div class="name">显示器编号</div>
                    <div class="fontclass">.icon-display-number</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-window-number"></i>
                    <div class="name">窗口编号</div>
                    <div class="fontclass">.icon-window-number</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-selective-output"></i>
                    <div class="name">选择输出</div>
                    <div class="fontclass">.icon-selective-output</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-merge"></i>
                    <div class="name">合并</div>
                    <div class="fontclass">.icon-merge</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-split"></i>
                    <div class="name">拆分</div>
                    <div class="fontclass">.icon-split</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-application"></i>
                    <div class="name">应用</div>
                    <div class="fontclass">.icon-application</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-display-stop"></i>
                    <div class="name">停止显示</div>
                    <div class="fontclass">.icon-display-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-get-change"></i>
                    <div class="name">获取变更</div>
                    <div class="fontclass">.icon-get-change</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-equipment-talk"></i>
                    <div class="name">设备-对讲</div>
                    <div class="fontclass">.icon-equipment-talk</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-ball-half-talk"></i>
                    <div class="name">摄像机-半球-对讲</div>
                    <div class="fontclass">.icon-video-ball-half-talk</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-gun-talk"></i>
                    <div class="name">摄像机-枪机-对讲</div>
                    <div class="fontclass">.icon-video-gun-talk</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-ball-talk"></i>
                    <div class="name">摄像机-球机-对讲</div>
                    <div class="fontclass">.icon-video-ball-talk</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-open"></i>
                    <div class="name">后端展开</div>
                    <div class="fontclass">.icon-open</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close-door"></i>
                    <div class="name">关门</div>
                    <div class="fontclass">.icon-close-door</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-open-door"></i>
                    <div class="name">开门</div>
                    <div class="fontclass">.icon-open-door</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-defence"></i>
                    <div class="name">布防</div>
                    <div class="fontclass">.icon-defence</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-defence-stop"></i>
                    <div class="name">撤防</div>
                    <div class="fontclass">.icon-defence-stop</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
